<template>
	<view>
		<!-- <view :class="isOpenModal?'fixed':''"> -->
		<view>
			<view>
				<billInput ref="refBill" :readonly="true" :muiltSelect="false" optType="PICKUP" v-model="bill" @confirm="onBillKeyEnter"></billInput>
				<view class="cu-form-group ">
					<view class="title">类型</view>
					<input :value="billTypeInfo && billTypeInfo.type_name" name="input" :disabled="true" />
				</view>
				<todo-input v-model="todoNum" @confirm="onConfirmTodo" :focus="todoFocus" @focusChange="onTodoFocusChange"></todo-input>
			</view>

			<view class="cu-bar bg-white solid-bottom margin-top">
				<view class="action">
					<text class="cuIcon-title text-orange"></text>
					物料列表
				</view>
			</view>
			<!-- todolist -->
			<todo-list-view :top="460" class="cu-list menu">
				<view v-for="(item, idx) in todoList" class="cu-item">
					<view class="content padding-tb-sm">
						<view>
							<text class="cuIcon-formfill text-blue margin-right-xs"></text>
							<text>发料单:</text>
							{{ item.bill_id }}
						</view>
						<view class="text-gray text-sm">
							<text class="lg text-gray cuIcon-settingsfill"></text>
							<text>料号:</text>
							{{ item.part_id }}
						</view>
					</view>
					<view class="action">
						<view class="text-grey text-xs">
							<text class="text-gray">可发({{ item.remain_qty }})</text>
							<text class="text-gray">需求({{ item.plan_qty }})</text>
						</view>
						<view class="text-gray  text-xs">
							<text class="text-gray">本次({{ item.current_qty }})</text>
							<text class="text-gray">超发({{ item.over_qty }})</text>
						</view>
					</view>
				</view>
			</todo-list-view>

			<view class="cu-bar tabbar bg-white shadow foot foot-btn-group">
				<button class="cu-btn bg-orange" :disabled="btnDisabled.startBtn" @tap="onStartPick">开始下架</button>
				<button class="cu-btn bg-white" :disabled="btnDisabled.cancelBtn" @tap="onCancelPick">取消下架</button>
				<button class="cu-btn bg-white" :disabled="btnDisabled.endBtn" @tap="onClosePick">下架完成</button>
				<button class="cu-btn bg-white" :disabled="btnDisabled.warming" @tap="onUsePick">消耗暂存</button>
			</view>
			<bill-prompt ref="refCancelPrompt" @confirm="onCancelConfirm" title="取消下架"></bill-prompt>
			<view class="cu-modal bottom-modal" :class="chooseCloseStoreModal.visible ? 'show' : ''">
				<view class="cu-dialog" @tap.stop="">
					<view class="cu-bar bg-white">
						<view class="action ">暂存仓选择</view>
						<view class="action text-green" @tap="onChooseStoreModalOk">确定</view>
					</view>
					<view class="grid col-12 " style="height:60vh; min-height:300rpx">
						<scroll-view style="height:60vh;" scroll-y="true">
							<radio-group @change="e => (chooseCloseStoreModal.storeId = e.detail.value)">
								<view style="border-top:1px solid #ccc"></view>
								<label class="cu-form-group" v-for="(item, idx) in chooseCloseStoreModal.storeList" :key="idx">
									<view class="title">
										<text>{{ item.wh_name }}</text>
									</view>
									<radio name="orderNum" :value="item.wh_id"></radio>
								</label>
							</radio-group>
						</scroll-view>
					</view>
				</view>
			</view>
			<view class="cu-modal bottom-modal" :class="chooseUseStoreModal.visible ? 'show' : ''">
				<view class="cu-dialog" @tap.stop="">
					<view class="cu-bar bg-white">
						<view class="action ">暂存仓选择</view>
						<view class="action text-green" @tap="onChooseUseStoreModalOk">确定</view>
					</view>
					<view class="grid col-12 " style="height:60vh; min-height:300rpx">
						<scroll-view style="height:60vh;" scroll-y="true">
							<radio-group @change="e => (chooseUseStoreModal.storeId = e.detail.value)">
								<view style="border-top:1px solid #ccc"></view>
								<label class="cu-form-group" v-for="(item, idx) in chooseUseStoreModal.storeList" :key="idx">
									<view class="title">
										<text>{{ item.wh_name }}</text>
									</view>
									<radio name="orderNum" :value="item.wh_id"></radio>
								</label>
							</radio-group>
						</scroll-view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import api from '@/serveices/wms-api.js';
import billInput from './bill-input.vue';
import todoInput from './todo-input.vue';
import util from '@/serveices/util.js';
import todoListView from './todo-list-view.vue';
import billPrompt from './bill-prompt.vue';
export default {
	components: { billInput, todoInput, todoListView, billPrompt },
	data() {
		return {
			bill: '',
			billTypeInfo: {
				bill_type: 0,
				type_name: ''
			},
			todoList: [],
			todoNum: '',
			todoFocus:true,
			mes_flag: false,
			chooseCloseStoreModal: {
				visible: false,
				storeList: [],
				storeId: ''
			},
			chooseUseStoreModal: {
				visible: false,
				storeList: [],
				storeId: ''
			}
		};
	},
	computed: {
		btnDisabled() {
			if (!this.bill) {
				return {
					startBtn: true,
					cancelBtn: true,
					endBtn: true,
					warming: true
				};
			}
			if (this.mes_flag) {
				//若mes_flag字段为Y，开始下架按钮不可用，消耗暂存按钮为可用状态，下架完成按钮为可用状态
				return {
					startBtn: true,
					cancelBtn: false,
					endBtn: false,
					warming: false
				};
			} else {
				//若mes_flag字段为N，开始下架按钮为可用状态，消耗暂存按钮为不可用状态，下架完成按钮为不可用状态
				return {
					startBtn: false,
					cancelBtn: true,
					endBtn: true,
					warming: true
				};
			}
		}
	},
	methods: {
		onTodoFocusChange(focus){
			this.todoFocus = focus
		},
		onBillKeyEnter({ bill, row, billTypeInfo, extData }) {
			//若mes_flag字段为Y，开始下架按钮不可用，消耗暂存按钮为可用状态，下架完成按钮为可用状态，
			// 若mes_flag字段为N，开始下架按钮为可用状态，消耗暂存按钮为不可用状态，下架完成按钮为不可用状态
			this.mes_flag = row && row.mes_flag === 'Y';
			this.billTypeInfo.type_name = billTypeInfo && billTypeInfo.type_name;
			this.billTypeInfo.bill_type = billTypeInfo && billTypeInfo.bill_type;
			this.checkBillAndGetToDoList(bill, extData && extData.playVoice);
		},
		onConfirmTodo() {
			if (!this.bill) {
				// 1.若单据编号文本框为空，扫描内容当作单据编号处理
				// 直接调用第2步接口，字段处理同第二步，按钮状态根据数据集mes_flag字段同第二步处理逻辑
				this.$refs.refBill.setValueAndTriggerEnter(this.todoNum, null, null, { playVoice: true });
				this.$nextTick(() => {
					this.todoNum = '';
				});
			} else if (!this.btnDisabled.startBtn) {
				// 2. 若单据编号文本框不为空，开始下架按钮为可用状态，此时报错：请首先点击开始下架按钮
				uni.showToast({
					icon: 'none',
					title: '请首先点击开始下架按钮',
					duration: 2000
				});
				this.todoNum = '';
			} else {
				// 3. 若单据编号文本框不为空，且开始下架为不可用状态，扫描内容作为物料信息处理
				api.pickup({
					opType: 'PICKUP',
					billId: this.bill,
					issueWh: '',
					overWh: '',
					scanInfo: this.todoNum
				})
					.then(res => {
						this.todoList = res.data;
						this.mes_flag = res.data[0].mes_flag === 'Y';
						this.todoNum = '';
						util.playSuccess()
					})
					.catch(err => {
						this.todoNum = '';
						util.playFailed()
					});
			}
		},
		checkBillAndGetToDoList(bill, isPlayVoidce) {
			this.bill = bill;
			return api
				.billdetail({
					bigType: 2,
					opType: 'PICKUP',
					billId: bill
				})
				.then(res => {
					this.todoList = res.data;
					if (res.data.length) {
						// 刷新单据
						this.$refs.refBill.lock();
						this.mes_flag = res.data[0].mes_flag === 'Y';
						this.billTypeInfo.type_name = res.data[0].type_name;
						this.billTypeInfo.bill_type = res.data[0].bill_type;
						if (isPlayVoidce) util.playSuccess();
					} else {
						this.$refs.refBill.clear();
						if (isPlayVoidce) util.playFailed();
					}
					this.todoFocus = true
				})
				.catch(err => {
					this.$refs.refBill.clear();
					if (isPlayVoidce) util.playFailed();
					this.todoFocus = true
				});
		},
		_pickup(optType, overWh) {
			return api
				.pickup({
					opType: optType,
					billId: this.bill,
					issueWh: '',
					overWh: overWh || '',
					scanInfo: this.todoNum
				})
				.then(res => {
					this.todoList = res.data;
					this.mes_flag = res.data[0].mes_flag === 'Y';
					this.bill = res.data[0].bill_id
				})
				.catch(err => {
					this.todoNum = '';
				});
		},

		// 按钮事件处理
		onStartPick() {
			// 开始下架
			this._pickup('STARTPICK').then(res=>{
			})
		},
		onCancelPick() {
			this.$refs.refCancelPrompt.show();
		},
		onCancelConfirm(scanInfo) {
			// 取消下架
			return api
				.pickup({
					opType: 'CANCEL',
					billId: '',
					issueWh: '',
					overWh: '',
					scanInfo: scanInfo
				})
				.then(res => {
					util.playSuccess();
					if (this.bill) {
						this.checkBillAndGetToDoList(this.bill);
					}
				})
				.catch(err => {
					util.playFailed();
				});
		},

		onClosePick() {
			//完成下架
			const arr = this.todoList.filter(x => x.over_qty > 0);
			if (arr && arr.length) {
				//6.2.	若下方表格中over_qty存在大于0的数据，需弹出暂存仓选择窗口
				this.chooseCloseStoreModal.visible = true;
				api.wh_list().then(res => {
					this.chooseCloseStoreModal.storeList = res.data;
					this.chooseCloseStoreModal.storeId = '';
				});
			} else {
				this._pickup('CLOSED');
			}
		},
		onChooseStoreModalOk() {
			//选择存储
			if (this.chooseCloseStoreModal.storeId) {
				// console.log(this.chooseCloseStoreModal.storeId)
				const storeId = this.chooseCloseStoreModal.storeId;
				this.chooseCloseStoreModal.visible = false;
				this.chooseCloseStoreModal.storeId = '';
				// 下架完成
				return api
					.pickup({
						opType: 'CLOSED',
						billId: this.bill,
						issueWh: '',
						overWh: storeId,
						scanInfo: ''
					})
					.then(res => {
						this.todoNum = '';
						this.$refs.refBill.confirmBill('', true);
						this.todoList = [];
					})
					.catch(err => {});
				// this._pickup('CLOSED',storeId).then(res=>{
				// 	//清除
				// 	this.todoNum = ''
				// 	this.$refs.refBill.confirmBill('', true);
				// 	this.todoList = []
				// })
			}
		},
		onUsePick() {
			// 消耗暂存
			//todo
			uni.showModal({
				title: '系统提示',
				content: '是否确认消耗暂存仓？',
				success: res => {
					if (res.confirm) {
						this.chooseUseStoreModal.visible = true;
						api.wh_list().then(res => {
							this.chooseUseStoreModal.storeList = res.data;
							this.chooseUseStoreModal.storeId = '';
							console.log(this.chooseUseStoreModal);
						});
						// Promise.all()
					}
				}
			});
		},
		onChooseUseStoreModalOk() {
			if (this.chooseUseStoreModal.storeId) {
				// console.log(this.chooseUseStoreModal.storeId)
				const storeId = this.chooseUseStoreModal.storeId;
				this.chooseUseStoreModal.visible = false;
				this.chooseUseStoreModal.storeId = '';
				return api
					.pickup({
						opType: 'USETEMP',
						billId: this.bill,
						issueWh: '',
						overWh: storeId,
						scanInfo: ''
					})
					.then(res => {
						this.todoNum = '';
						this.$refs.refBill.clear();
						this.todoList = [];
					})
					.catch(err => {});
			}
		}
	},
	beforeMount() {}
};
</script>

<style>
.fixed {
	position: fixed;
}
</style>
